<template>
  <div>
    <el-tabs v-model="activeName" class="demo-tabs" type="card" ref="target">
      <el-tab-pane
        :label="tab.label"
        :name="tab.name"
        v-for="tab in data"
        :key="tab.name"
      >
        <!-- 导航内容区域 -->
        <ul v-if="tab.content.length !== 0">
          <li class="tabs-item" v-for="item in tab.content" :key="item.id">
            <div class="tabs-item-left">
              <div class="image">
                <img
                  :src="item.cover"
                />
              </div>
              <div class="my">
                <div class="title">{{item.planName}}</div>
                <div class="time">已练习{{item.weekTrainedCount}}次{{item.weekTrainedDuration}}分钟</div>
              </div>
            </div>
            <div class="tabs-item-right">
              <el-icon color="#FFA6CA" class="icon" :size="22">
                <Clock  v-show="item.status === 'init'"/>
                <Refresh v-show="item.status === 'processing'"/>
                <CircleCheck v-show="item.status === 'ending'"/>
              </el-icon>
              <div class="detail-light" v-show="item.status === 'init'">未开始</div>
              <div class="detail-light" v-show="item.status === 'processing'">进行中</div>
              <div class="detail-light" v-show="item.status === 'ending'">已结束</div>
            </div>
          </li>
        </ul>

        <!-- 无数据区域 -->
        <el-empty
          v-else
          :image-size="200"
          description="暂无数据"
          image="https://rs.dance365.com/img/no_content@3x.0fd78ad2.png"
          :style="{ minHeight: '500px' }"
        />
      </el-tab-pane>
      <button class="demo-tabs-right">创建</button>
    </el-tabs>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "MyRoom",
});
</script>

<script setup lang="ts">
  import { getMyRoomDataRequest } from "@/api/practice";
import type {tabDataItemType} from '../model/type'
import { ref, onMounted } from "vue";
//引入自定义hooks
import useLazyData from "@/hooks/useLazyData";
//tab选项初始值
const activeName = ref("first");


//tab数据
const tabData = ref<tabDataItemType[]>([
  {
    label: "全部",
    name: "first",
    content: [],
  },
  {
    label: "我创建的",
    name: "second",
    content: [],
  },
  {
    label: "我加入的",
    name: "third",
    content: [],
  },
  {
    label: "我课程的",
    name: "fourth",
    content: [],
  },
]);

// //请求数据方法
// const getMyRoomData = async () => {
//   const res = await getMyRoomDataRequest()

//   tabData.value[0].content = res.content
  
// }

// onMounted(() => {
//   //初始化获取数据
//   getMyRoomData()
// })
const {data, target} = useLazyData(getMyRoomDataRequest, tabData.value)
</script>

<style lang="less" scoped>
:deep(.el-tabs) {
  position: relative;
  font-size: 14px;
  //头部导航
  .el-tabs__header {
    padding: 26px 30px;
    background-color: #fff;
    .el-tabs__nav {
      border: none;

      .el-tabs__item {
        cursor: pointer;
        border-radius: 4px;
        color: #7d8090;
        padding: 9px 12px;
        border-left: none;
        line-height: 20px;
        text-align: center;
        margin-right: 24px;

        &.is-active {
          background-color: #f93684;
          color: #fff;
          transition: all 0.3s linear;
        }
      }
    }
  }

  //底部内容
  .el-tabs__content {
    position: static;
    padding: 0 30px 20px;
    background-color: #fff;
    border-radius: 4px;
    min-height: 700px;
    //内容区域
    ul {
      margin: 20px 0;
      box-sizing: border-box;
      padding-bottom: 40px;
      .tabs-item {
        list-style: none;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 20px;
        padding-bottom: 20px;
        border-bottom: 1px solid #e3e3e3;

        .tabs-item-left {
          display: flex;
          .image {
            img {
              width: 169px;
              height: 101px;
              border-radius: 4px;
              background-size: cover;
              background-position: 50%;
              margin-right: 20px;
            }
          }
          .my {
            .title {
              font-weight: 700;
              font-size: 16px;
              color: #111;
            }
            .time {
              margin-top: 25px;
              font-size: 14px;
              color: #7d8090;
            }
          }
        }

        .tabs-item-right {
          text-align: center;
          .icon {
          }
          .detail-light {
            margin-top: 9px;
            font-size: 14px;
            color: #7d8090;
          }
        }
      }
    }

    //创建按钮单独样式
    .demo-tabs-right {
      position: absolute;
      right: 31px;
      top: 36px;
      width: 84px;
      height: 32px;
      line-height: 32px;
      color: #fff;
      text-align: center;
      background: #f93684;
      border-radius: 16px;
      cursor: pointer;
      border: none;
    }
  }
}

//动态样式
.active {
  background-color: #f93684;
  color: #fff;
}
</style>
